<!DOCTYPE html>
<html lang="en" class="md device-pixel-ratio-3 device-retina device-desktop device-windows support-position-sticky">
<head>
    <meta charset="utf-8" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1" />
    <link rel="apple-touch-icon" href="favicon.ico" />
    <meta name="apple-mobile-web-app-title" content="坏坏漫画" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <script type="text/javascript" src="js/debug.js"></script>
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>绑定手机号</title>
    <link href="/css/main.48b4036a.css" rel="stylesheet">
    <link href="/css/aui.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
    <script type="text/javascript" src="/js/template-web.js"></script>
    <script type="text/javascript" src="/js/aui-toast.js"></script>
    <script type="text/javascript" src="/js/aui-dialog.js"></script>
    <script type="text/javascript" src="/js/config.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/iconfont.js?v=1"></script>
    </style>

</head>

<body>
    <div id="root" style="height: 100%;">
        <div id="framework7-root" class="framework7-root ">
            <div class="panel-backdrop"></div>
            <div class="panel panel-right panel-reveal">
            </div>
            <div class="view view-main">
                <div class="view view-main">
                    <div class="page page-current" data-name="personalResetPassword">
                        <div class="navbar">
                            <div class="navbar-inner sliding">
                                <div class="left"><a class="icon-only link icon-only back"
                                        href="/setting.html"><i class="icon icon-back"></i></a></div>
                                <div class="title">绑定手机号</div>
                            </div>
                        </div>
                        <div class="page-content">
                            <div class="list no-hairlines">
                                <ul>
                                    <li class="">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">lock</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">手机号</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="phone" class="passInput" id="phone"
                                                        placeholder="要绑定的手机号">
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i
                                                    class="padding-vertical-sm padding-left-sm icon material-icons">lock</i>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">验证码</div>
                                                <div class="item-input-wrap">
                                                    <input type="text" name="verifycode" class="passInput"
                                                        id="verifycode" placeholder="输入验证码"
                                                        style=" float:left; width:100px;">
                                                    <img src="" id="codeImg" style="height: 1.5em;float: left;margin-left: 7em;" alt='点击更换' />
                                                        <a href="javascript:void(0)" onclick="getImageCode()" style="margin-top:8px; margin-left:5px; float:left;">换一张</a>
                                                    <span class="input-clear-button"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="reader-login-captcha-item">
                                        <div class="item-content item-input">
                                            <div class="item-media"><i class="padding-vertical-sm padding-left-sm icon material-icons">sms</i></div>
                                            <div class="item-inner">
                                                <div class="item-title item-floating-label">验证码</div>
                                                <div class="item-input-wrap">
                                                <input type="text" name="code" class="vCodeInput" id="code" placeholder="验证码" >
                                                <span class="input-clear-button"></span>
                                                <a id="dosms" class="reader-login-captcha-button button dosms" style="bottom: 0.01rem;" data-type="1"  href="javascript:void(0)">获取验证码</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="list no-hairlines">
                                <ul>
                                    <li class="text-align-center"><a class="item-link list-button btn-submit"
                                            data-tab="false">提交</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="framework7-modals"></div>
            <div class="actions-backdrop"></div>
            <div class="dialog-backdrop"></div>
            <div class="dialog dialog-buttons-1 dialog-buttons-vertical reader-copy-modal modal-in"
                style="display: none; margin-top: -372px;">
                <div class="dialog-inner">
                    <div class="dialog-title"></div>
                    <div class="dialog-text"></div>
                    <input id="foo" type="link" value="" readonly="">
                </div>
                <div class="dialog-buttons">
                    <span class="dialog-button dialog-button-bold text-align-center text-color-primary"
                        data-clipboard-action="copy" data-clipboard-target="#foo">复制链接</span>
                </div>
            </div>
            <div class="popover-backdrop"></div>
            <div class="toast">
                <div class="toast-content">
                    <div class="toast-icon"></div>
                    <div class="toast-text"></div>
                    <a class="toast-button"></a>
                </div>
            </div>

        </div>
    </div>
    <script type="text/javascript" src="/js/yymh.js"></script>
    <script src="/js/clipboard.min.js"></script>
    <script type="text/javascript">
        getImageCode();
        $().ready(function () {
            // 修改
            $(".btn-submit").click(function () {
                var phone = $("#phone").val();
                var code = $("#code").val();
                if (!phone) {
                    layer.msg("请输入手机号!"); return;
                }
                var verifycode = $("#verifycode").val();
                if (!verifycode) {
                    layer.msg("请输入图片验证码!"); return;
                }
                $.ajax({
                    url: baseApi +"/modifyPhone",
                    type: 'post',
                    data: {'phone':phone,'verifycode':verifycode,'code':code},
                    headers:{'authToken':localStorage.getItem("authToken")},
                    success: function (data) {
                        if (data.code == 0) {
                            $('.btn-submit').addClass("disabled");
                            setTimeout('jump_url()', 3000);
                        }
                    }
                })
            });
        });
        var djstime = 60;
        var num = djstime;
        var djst = '';
        // 获取验证码
        // 发送短信验证码
        $('.dosms').click(function () {
            var type = $('.dosms').attr('data-type');
            if (type != 1) {
                return false;
            }
            var phone = $("input[name='phone']").val();
            if (phone == "" || phone == null || phone.length != 11) {
                layer.msg('请输入手机号!');
            }
            var verifycode = $("#verifycode").val();
            if (!verifycode) {
                layer.msg("请输入图片验证码!"); return;
            }
            $.ajax({
                url: baseApi +"/modifyPhone/sendCode",
                type: 'post',
                data: {'phone':phone,'verifycode':verifycode},
                headers:{'authToken':localStorage.getItem("authToken")},
                success: function (data) {
                    if (data.code == 0) {
                        $('.dosms').attr('data-type', 2);
                        $('.dosms').html('已发送(' + num + ')');
                        djst = setInterval("djs()", 1000);
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function () {
                    alert('error!');
                }
            })
        });
        function djs() {
            if (num <= 0) {
                $('.dosms').attr('data-type', 1);
                $('.dosms').html('获取验证码');
                num = djstime;
                clearInterval(djst);
            } else {
                num = num - 1;
                $('.dosms').html('已发送(' + num + ')');
            }
        }
        $("input").focus(function () {
            $(this).addClass('input-focused');
            $(this).parent().parent().parent().addClass('item-input-focused');

        });
        $("input").blur(function () {
            if ($(this).val() != '') {
                $(this).addClass('input-with-value');
                $(this).parent().parent().parent().addClass('item-input-with-value');
            }
            $(this).removeClass('input-focused');
            $(this).parent().parent().parent().removeClass('item-input-focused');

        });
        
        function getImageCode(){
            $.ajax({
                url: baseApi +"/verify/getImageCode",
                type: 'post',
                headers:{'authToken':localStorage.getItem("authToken")},
                success: function (data) {
                    $("#codeImg").attr("src","data:image/png;base64,"+data);
                },
                error: function () {
                    alert('error!');
                }
            })
        }

        function jump_url() {
            window.location.href = "/user.html";
        }
    </script>


</body>

</html>